<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <svg width="500" height="500" viewBox="0 0 500 500">
      <!-- 定义路径 -->
      <path id="myPath" d="M50,150 Q150,50 250,150 T450,150" fill="none" stroke="black" />

      <!-- text属性：x y 文本的坐标 dx dy 文本的偏移量  rotate 旋转角度   text-anchor 文本对齐方式  start middle end  textLength 文本长度  lengthAdjust 文本长度调整-->
      <text font-size="2rem">
        <textPath href="#myPath" startOffset="100">
          HelloCode ifuuuuuun
          <!-- 通过 animate 动态改变 startOffset -->
          <animate attributeName="startOffset" from="-70%" to="100%" dur="5s" repeatCount="indefinite" />
        </textPath>
      </text>
    </svg>
  </body>
</html>
